import React, { Component } from 'react'
import '../../componentStyle/secondContent.css'

export default class SecondContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isMouse: false
        }
    }

    // 生成卡片的标题
    generateTitleNode = (data, index) => {
        const { title } = data;
        // 由于图片大小不一致，需进行针对性改变
        if ((index === 1) || (index === 2)) {
            return (
                <p style={{
                    color: '#fff',
                    fontSize: 24,
                    marginTop: 70
                }}>{title}</p>
            );
        } else if (index === 0) {
            return (
                <p style={{
                    color: '#fff',
                    fontSize: 24,
                    marginTop: 30
                }}>{title}</p>
            );
        }
        return (
            <p style={{
                color: '#fff',
                fontSize: 24
            }}>{title}</p>
        )
    }

    // 生成卡片的叙述
    generateDescriptionNode = (data) => {
        const { description } = data;
        return (
            <p style={{
                color: '#fff',
                marginBottom: 0
            }}>{description}</p>
        )
    }

    // 以下两个函数实现移入移出效果
    handleMouseOver = () => {
        const isMouse = true;
        this.setState({
            isMouse
        });
    }

    handleMouseOut = () => {
        const isMouse = false;
        this.setState({
            isMouse
        });
    }

    render() {
        return (
            <div
                onMouseOver={() => this.handleMouseOver()}
                onMouseOut={() => this.handleMouseOut()}
                style={{
                    boxShadow: (this.state.isMouse ? '0px 0px 10px #888888' : 'none'),
                    height: 600,
                    textAlign: 'center',
                    width: 300,
                    position: 'relative',
                    borderRadius: 20
                }}
            >
                <img src={this.props.data.URL} alt="xxx" style={{
                    width: 300,
                    height: 600,
                    borderRadius: 20
                }} />
                <div style={{
                    position: 'absolute',
                    top: '50%'
                }}>
                    <div style={{
                        fontSize: 30,
                        margin: '20px 0px',
                        color: 'white',
                        position: 'relative',
                        top: (this.props.scrollIndex === 1 ? 0 : -50),
                        transitionDelay: `${(this.props.index * 1)}s`,
                        transitionDuration: '.5s',
                        zIndex: 4
                    }}>
                        {this.props.data.title}
                    </div>
                    <div style={{
                        color: 'white',
                        position: 'relative',
                        top: (this.props.scrollIndex === 1 ? 0 : 50),
                        transitionDuration: '.5s',
                        transitionDelay: `${(this.props.index * 1)}s`,
                        zIndex: 4,
                        paddingBottom: 20
                    }}>
                        {this.props.data.description}
                    </div>
                    <div style={{
                        width: 300,
                        top: 0,
                        position: 'absolute',
                        height: '100%',
                        backgroundColor: '#000',
                        opacity: 0.5,
                        zIndex: 3
                    }}></div>
                </div>
            </div>
        )
    }
}
